import React, { useEffect, useState } from 'react';
import {
  Input,
  DatePicker,
  Space,
  Button,
  Table,
  Tag,
  Popconfirm,
  Drawer,
  Form,
  Tree,
  message,
} from 'antd';
import {
  getMenuApi,
  addMenuApi,
  deleteMenuApi,
  putMenuApi,
} from '../../apis/menu/menuAPI';
import { WindowsOutlined } from '@ant-design/icons';

export default function menu() {
  const { RangePicker } = DatePicker;
  const [menu, setMenu] = useState();
  const [menuvisible, setMenuVisible] = useState(false);
  //保存新增菜单数据
  const [addmenu, steAddmenu] = useState();
  //保存新增上级菜单id
  const [parentId, setParentId] = useState();
  const [xgvisible, setXgvisible] = useState(false);
  //获取修改数据
  const [xgmenu, setXgmenu] = useState();
  //获取修改上级菜单id
  const [xgparentId, setXgparentId] = useState();
  //获取修改菜单id
  const [menuId, setMenuId] = useState();
  useEffect(() => {
    getMymenu();
  }, []);
  const getMymenu = async () => {
    const res = await getMenuApi();
    console.log(res);
    setMenu(res.data.rows.children);
  };
  const anniu = () => {
    console.log('按钮');
  };
  const caidan = () => {
    setMenuVisible(true);
  };
  const menuonClose = () => {
    setMenuVisible(false);
  };
  //新增上级菜单id
  const xzcdonCheck = (values) => {
    setParentId(values[0]);
  };
  //新增菜单
  const xzcdonFinish = async (values) => {
    const res = await addMenuApi({ ...values, parentId });
    if (res.status == 200) {
      message.success('添加成功');
    } else {
      message.error('添加失败');
    }
  };
  const deletedata = async (tags) => {
    const res = await deleteMenuApi(tags.id);
    if (res.status == 200) {
      message.success('删除成功');
    } else {
      message.error('删除失败');
    }
  };
  //修改抽屉退出
  const xgmenuonClose = () => {
    setXgvisible(false);
  };
  //获取修改上级菜单id
  const xgcdonCheck = (values) => {
    setXgparentId(values[0]);
  };
  //点击获取修改数据
  const changedata = (tags) => {
    console.log(tags);
    setXgvisible(true);
    setXgmenu(tags);
    setMenuId(tags.id);
  };
  //修改
  const xgcdonFinish = async (values) => {
    const res = await putMenuApi({ ...values, parentId: xgparentId, menuId });
    if (res.status == 200) {
      message.success('修改成功');
    } else {
      message.error('修改失败');
    }
  };
  const columns = [
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '图标',
      dataIndex: 'icon',
      key: 'icon',
      render: (tags) => (
        <>
          <WindowsOutlined />
        </>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type) => {
        const flag = type == '0';
        const text = flag ? '菜单' : '菜单';
        const color = flag ? 'success' : '';
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '地址',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: 'Vue组件',
      dataIndex: 'component',
      key: 'component',
    },
    {
      title: '排序',
      dataIndex: 'order',
      key: 'order',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '修改时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
    },
    {
      title: '操作',
      render: (tags) => (
        <>
          <Button onClick={() => changedata(tags)}>修改</Button>
          <Button onClick={() => deletedata(tags)}>删除</Button>
        </>
      ),
    },
  ];
  return (
    <div>
      <div style={{ width: '1600px', height: '50px' }}>
        名称：<Input style={{ width: '200px', marginRight: '400px' }}></Input>
        创建时间：
        <Space direction="vertical" size={12}>
          <RangePicker />
        </Space>
        <Button
          style={{
            backgroundColor: '#1890ff',
            color: 'white',
            marginLeft: '400px',
            marginRight: '20px',
          }}
        >
          查询
        </Button>
        <Button>重置</Button>
      </div>
      <div style={{ width: '1600px', height: '50px' }}>
        <Button
          style={{
            border: '1px solid #1890ff',
            color: '#1890ff',

            marginRight: '20px',
          }}
        >
          <Popconfirm
            title="请选择创建类型"
            onConfirm={anniu}
            onCancel={caidan}
            okText="按钮"
            cancelText="菜单"
          >
            新增
          </Popconfirm>
        </Button>
        <Button>删除</Button>
      </div>
      <div style={{ width: '1600px', height: '50px' }}>
        <Table
          columns={columns}
          dataSource={menu}
          pagination={{
            defaultCurrent: 1,
            defaultPageSize: 7,
            pageSizeOptions: [5, 7, 10],
            showSizeChanger: true,
          }}
        />
      </div>
      <Drawer
        title="Basic Drawer"
        placement="right"
        onClose={menuonClose}
        visible={menuvisible}
      >
        <Form
          name="control-hooks"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 12,
          }}
          layout="horizontal"
          // initialValues={{
          //   size: componentSize,
          // }}
          // onValuesChange={onFormLayoutChange}
          // size={componentSize}
          onFinish={xzcdonFinish}
        >
          <Form.Item label="菜单名称" name="menuName">
            <Input />
          </Form.Item>
          <Form.Item label="菜单路径" name="path">
            <Input />
          </Form.Item>
          <Form.Item label="组件地址" name="component">
            <Input />
          </Form.Item>
          <Form.Item label="菜单类型" name="type">
            <Input />
          </Form.Item>
          <Form.Item label="上级菜单">
            <Tree
              //   style={{ marginLeft: '100px' }}
              checkable
              onCheck={xzcdonCheck}
              treeData={menu}
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
      <Drawer
        title="修改菜单"
        placement="right"
        onClose={xgmenuonClose}
        visible={xgvisible}
      >
        <Form
          name="control-hooks"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 12,
          }}
          layout="horizontal"
          // initialValues={{
          //   size: componentSize,
          // }}
          // onValuesChange={onFormLayoutChange}
          // size={componentSize}
          onFinish={xgcdonFinish}
        >
          <Form.Item label="菜单名称" name="menuName">
            <Input.TextArea defaultValue={xgmenu != null ? xgmenu.title : ''} />
          </Form.Item>
          <Form.Item label="菜单路径" name="path">
            <Input defaultValue={xgmenu != null ? xgmenu.path : ''} />
          </Form.Item>
          <Form.Item label="组件地址" name="component">
            <Input defaultValue={xgmenu != null ? xgmenu.component : ''} />
          </Form.Item>
          <Form.Item label="上级菜单">
            <Tree
              //   style={{ marginLeft: '100px' }}
              checkable
              onCheck={xgcdonCheck}
              treeData={menu}
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}
